.popup {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color: $color-black, $alpha: 0.8);
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;

    &__content {
        @include absCenter;

        width: 75%;
        height: 50rem;
        background-color: white;
        box-shadow: 0 2rem 4rem rgba($color: $color-black, $alpha: 0.2);
        border-radius: 3px;
        display: table;
        overflow: hidden;

        @include respond(tab-land) {
            width: 100%;
        }

        // opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.5s 0.2s;
    }

    &__left {
        width: 33.33333%;
        display: table-cell;
        

        @include respond(tab-land) {
            width: 20%;
            vertical-align: middle;
        }
    }

    &__right {
        width: 66.66667%;
        display: table-cell;
        vertical-align: middle;
        padding: 3rem 5rem;

        @include respond(tab-land) {
            width: 80%;
        }

        @include respond(tab-port) {
            padding: 2rem 2rem;
        }
    }

    &__img {
        display: block;
        width: 100%;
    }

    &__text {
        font-size: 1.4rem;
        margin-bottom: 4rem;

        -moz-column-count: 2;
        -moz-column-gap: 4rem;
        -moz-column-rule: 1px solid $color-grey-dark-2;

        column-count: 2;
        column-gap: 4rem;
        column-rule: 1px solid $color-grey-dark-2;

        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;

        @include respond(tab-land) {
            -moz-column-count: unset;
            -moz-column-gap: 1rem;

            column-count: unset;
            column-gap: 1rem;

            height: 20rem;
            overflow: auto;
        }

    }

    &:target {
        opacity: 1;
        visibility: visible;
    }

    &:target &__content {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    &__close {

        &:link,
        &:visited {
            color: $color-grey-dark;
            position: absolute;
            top: 2.5rem;
            right: 2.5rem;
            font-size: 3rem;
            text-decoration: none;
            display: inline-block;
            line-height: 1rem;
            transition: all 0.2s;
        }

        &:hover {
            color: $color-primary;
        }
    }
}